import type { Metadata } from "next";
import Link from "next/link";
import { notFound } from "next/navigation";
import { getCategory, searchTools, categoryTree } from "@/lib/public/queries";
import { parseFilters, type SP } from "@/lib/public/params";
import { Breadcrumbs } from "@/components/breadcrumbs";
import { ToolCard } from "@/components/tool-card";
import { Pagination } from "@/components/pagination";
export const revalidate = 600;
export async function generateStaticParams() { try { const t = await categoryTree(); return t.flatMap((c) => [{ slug: c.slug }, ...c.children.map((x) => ({ slug: x.slug }))]); } catch { return []; } }
export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }): Promise<Metadata> {
  const c = await getCategory((await params).slug); if (!c) return { title: "Not found" };
  return { title: `${c.name} tools`, description: c.description, alternates: { canonical: `/categories/${c.slug}` } };
}
export default async function CategoryPage({ params, searchParams }: { params: Promise<{ slug: string }>; searchParams: Promise<SP> }) {
  const { slug } = await params; const c = await getCategory(slug); if (!c) notFound();
  const f = parseFilters(await searchParams);
  const res = await searchTools({ ...f, category: [slug], sort: f.sort ?? "quality" });
  return (
    <div className="mx-auto max-w-7xl px-4 py-8 sm:px-6">
      <Breadcrumbs items={[{ href: "/categories", label: "Categories" }, ...(c.parent ? [{ href: `/categories/${c.parent.slug}`, label: c.parent.name }] : []), { label: c.name }]} />
      <h1 className="display h1 mt-3">{c.name}</h1>
      <p className="mt-2 max-w-3xl text-fg-2">{c.description}</p>
      {c.children.length > 0 && <ul className="mt-5 flex flex-wrap gap-2">{c.children.map((ch) => <li key={ch.slug}><Link href={`/categories/${ch.slug}`} className="chip hover:border-accent/40 hover:text-accent">{ch.name} <span className="text-fg-3">{ch.count}</span></Link></li>)}</ul>}
      <div className="mt-8 flex items-center justify-between"><p className="text-sm text-fg-2">{res.total} tools</p><Link href={`/tools?category=${slug}`} className="text-sm text-accent hover:underline" rel="nofollow">Filter in directory →</Link></div>
      <h2 className="sr-only">Tools in this category</h2>
      {res.items.length ? <div className="mt-4 grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">{res.items.map((t) => <ToolCard key={t.id} t={t} />)}</div> : <p className="card mt-4 p-8 text-center text-fg-2">No published tools in this category yet.</p>}
      <Pagination page={res.page} pages={res.pages} makeHref={(p) => `/categories/${slug}?page=${p}`} />
    </div>
  );
}